<template>
  <div>
    <div>这是基本信息页面</div>
    <div class="info-cont">
      <div class="title">基础信息</div>
      <div class="profile">
        <div>头像</div>
        <div class="pro-btn"><img src="@/assets/+.png" alt="" class="exit-btn"></div>
      </div>
      <div class="profile">
        <div>姓名</div>
        <div class="name">多哈哈</div>
      </div>
      <div class="profile">
        <div>性别</div>
        <div class="name">多哈哈</div>
      </div>
      <div class="profile">
        <div>年龄</div>
        <div>
          <select>
            <option value="volvo">请选择</option>
            <option value="saab">10</option>
            <option value="opel">20</option>
            <option value="audi">30</option>
          </select>
        </div>
      </div>
      <div class="profile">
        <div>星座</div>
        <div>
          <select>
            <option value="volvo">请选择</option>
            <option value="saab">白羊座</option>
            <option value="opel">水瓶座</option>
            <option value="audi">双鱼座</option>
          </select>
        </div>
      </div>
      <div class="profile">
        <div>微信号</div>
        <div class="name"><input id="" type="text" name="" placeholder="请输入"></div>
      </div>
    </div>
    <div class="next-btn">
      <div><img src="@/assets/next.png" alt="" class="next-img">下一步</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      from: {
        nickname: '',
        gender: '',
        age: '',
        constellation: '',
        wechat: ''
      }
    }
  }
}
</script>
<style scoped>

.info-cont{
    width: 90%;
    margin: 3% auto;
    display: flex;
    justify-content:space-between;
    flex-wrap: wrap;
    align-items:center;

}
.profile{
    width: 100%;
    height: 60px;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 1px solid #ccc;
}
.title{
    font-size: 18px;
    color: #E06363;
    display: block;
    width: 100%;
}
.pro-btn{
    width: 50px;
    height: 50px;
    overflow: hidden;
    background: #ccc;
    border-radius: 50%;
}
.exit-btn{
    vertical-align: top;
    text-align: center;
    padding: 9px 17px;
}
.name{
    font-size: 14px;
    /* width: 65px; */
}
select {
  border: none;
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  background: none;
  height: 37px;
  /* text-align-last: right;
  -webkit-text-align-last: right; */
}
select::-ms-expand { display: none; }
option{
    text-align: right;
}
.next-btn{
    width: 100%;
    margin: 0 auto;
    height: 50px;
    line-height: 50px;
    background: #E06363;
    position: fixed;
    bottom: 0;
    text-align: center;
    color: #fff;
}
.next-img{
    width: 14px;
    height: 14px;
    vertical-align: middle;

}
input {
    padding: 0 3px;
    border: none;
    background: none;
    color: #202124;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    border-radius: 6px;
    text-align: right;
}
</style>
